<template>
    <div class="totalRankList">
        <x-header></x-header>
        <main class="Site-content">
            <div class="divi">
                <divider>{{diviTitle}}</divider>
            </div>
            <div class="rules">
                <div class="rule">
                    <div>排名规则</div>
                    <div v-for="(item,index) in ranks.rules">
                        {{index+1}}、{{item}}
                    </div>
                </div>
                <div class="rank">
                    <ul  v-for="(item,index) in ranks.rank">
                        <li class="item">
                            <div class="item_index">
                               <span>{{index+1}}</span>
                                <img class="item_icon" v-if="item.icon"  :src="item.icon" width="48" alt=""/>
                            </div>
                            <div class="item_name">{{item.name}}</div>
                            <div class="item_steps">{{item.steps}}</div>
                            <div class="item_reachTime" v-if="item.reachTime">
                                到达日期：{{item.reachTime}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </main>
        <x-footer></x-footer>
    </div>
</template>

<script>
    import xHeader from './common/header.vue'
    import xFooter from './common/footer.vue'
    import {Divider, XInput, Group} from 'vux'

    export default {
        name: 'totalRankList',
        components: {
            xHeader,
            xFooter,
            Divider,
            XInput,
            Group,
        },
        data() {
            return {
                page: this.$route.params.page,   // 上一个页面跳转时携带的参数
                diviTitle: '',                   // 分割线的名称
                ranks: null,                        //渲染在页面的规则及排行榜
                groupTotalRanks: {    //团队总榜数据
                    rules: ['本榜单每天更新一次，统计的是所有赛段的总排名。', '按照各个赛段战队的分数合计由高到低排名。 ', '错过前面赛段的战队，通过后续赛段的努力，依然有机会获得“总赛段团队奖”。'],
                    rank: [
                        {name: '超能陆战队', steps: '499分'},
                        {name: '奔跑吧兄弟', steps: '388分'},
                        {name: '花样姐姐 ', steps: '375分'},
                        {name: '世界大场', steps: '372分'},
                        {name: '广东战队', steps: '350分'},
                        {name: '天津一家人', steps: '333分'},
                        {name: '宋咩咩战场 ', steps: '325分'},
                        {name: '世河南战队', steps: '300分'},
                        {name: '重庆战队', steps: '289分'},
                        {name: '男人帮', steps: '264分'},
                        {name: '无限挑战', steps: '250分'},
                    ]
                },
                groupRanks: {   // 团队分榜数据
                    rules: ['本榜单每天更新一次，步数来源于HehaApp ', '按照战队完成的先后顺序、步数的进行排名。如出现多组团队在同一天完成任务的情况时，步数多的 排名靠前。', '战队完成本赛段，即可根据排名先后获得一定分数。'],
                    rank: [
                        {name: '超能陆战队', steps: '35.99万步', reachTime: '2016-07-02'},
                        {name: '奔跑吧兄弟', steps: '34.28万步', reachTime: '2016-07-02'},
                        {name: '花样姐姐 ', steps: '32.01万步', reachTime: '尚未达到'},
                        {name: '世界大场', steps: '30.00万步', reachTime: '尚未达到'},
                        {name: '广东战队', steps: '29万步', reachTime: '尚未达到'},
                        {name: '天津一家人 ', steps: '28万步', reachTime: '尚未达到'},
                        {name: '宋咩咩战场', steps: '25.4万', reachTime: '尚未达到'},
                        {name: '世河南战队', steps: '23万步', reachTime: '尚未达到'},
                        {name: '重庆战队', steps: '19万步', reachTime: '尚未达到'},
                        {name: '男人帮', steps: '18万步', reachTime: '尚未达到'},
                        {name: '无限挑战', steps: '15.4万', reachTime: '尚未达到'},
                    ]
                },
                personalRanks: { //个人分榜数据
                    rules: ['本榜单每天更新一次。数据来源于HehaApp', '按照当前赛段的步数进行排名'],
                    rank: [
                        {name: '甄子丹', steps: '20.03万步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '张涵予', steps: '20.02万步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '范进', steps: '20.01万步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '林允儿', steps: '20.00万步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '何理会', steps: '99999步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '金在俊', steps: '80000步',icon: require("../assets/images/icon_port_01.png"),},
                        {name: '宋仲基', steps: '79999步',icon: require("../assets/images/icon_port_01.png"),},
                    ]
                },
            }
        },
        created() {
            switch (this.page) {
                case '战队总榜':
                    this.diviTitle = '团队总榜单';
                    this.ranks = this.groupTotalRanks;
                    break;
                case '战队分榜':
                    this.diviTitle = '西域大漠行分赛段团队榜单';
                    this.ranks = this.groupRanks;
                    break;
                case '个人分榜':
                    this.diviTitle = '西域大漠行分赛段个人榜单';
                    this.ranks = this.personalRanks;
                    break;
            }
        },

        methods: {},

    }

</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
    .totalRankList {
    .rules {
        color: #000;
    .rule {
        height: auto;
        line-height: 1.2rem;
        font-size: .7rem;
        padding: 0rem 1rem 0rem 1.2rem;
    }
    .rank {
        height: auto;
        background-color: #fff;
        font-size: .8rem;
    .item {
        line-height: 3rem;
        margin: 0 1rem;
        padding:0 .4rem;
        border-bottom: 1px dashed #000;
    .item_index {
        width: 4rem;
        display: inline-block;
        .item_icon{
            vertical-align: middle;
            padding-lef:.6rem;
        }
    }
    .item_name {
        width: 7.5rem;
        display: inline-block;
    }
    .item_steps {
        width:4rem;
        display: inline-block;
    }
    .item_reachTime {
        color:#777;
        text-align: right ;
        line-height: .7rem;
        margin-bottom:1.1rem;
    }
    }
    }
    }
    }
</style>